<template>
  <div>
    <!-- 头部搜索 -->
    <div class="dskt_nav_bar">
      <div class="bar_span bar_left">
        <img @click="searchEnterEvent" :src="'./static/img/icon_search.png'">
      </div>
      <div class="bar_center">
        <input
          type="text"
          class="base_input"
          v-model="searchData.searchKey"
          @keyup.enter="searchEnterEvent"
           ref="inputText" 
              @input="searchInputEvent"
          placeholder="姓名、学号、考核单号、开单编号"
        >
      </div>
      <div class="bar_span bar_right click_to_green" @click="onBarRightClick">
        <img :src="'./static/img/icon_funnel.png'">
      </div>
    </div>
    <!--end 头部搜索 -->
    <div class="list_title">
      <span class="green_span_title">
        {{showKdTimeText}}查询到
        <span class="span_num">{{dataNum}}</span>条开单记录（后台开单的不支持）
      </span>
    </div>
    <!-- 滚动数据div -->
    <div class="scrollerWrap">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="myscroller">
        <swipeout>
          <swipeout-item transition-mode="follow" v-for="(order,index) in dataList" :key="index">
            <div slot="right-menu" v-if="order.canBack && order.openOrderState==1">
              <swipeout-button @click.native="onButtonClick(order.id)" type="warn">撤回</swipeout-button>
            </div>
            <div
              slot="content"
              class="green-box kaidan_box vux-1px-t click_to_green"
              @click="toEdit('update',order.id,index)"
            >
              <div class="kaidan_box_top">
                <flexbox :gutter="0">
                  <flexbox-item :span="6/10" class="user_group_div">{{order.names}}</flexbox-item>
                  <flexbox-item :span="4/10" align="right">
                    <p class="status">{{ order.openOrderState==1 ? '生效' : '撤回' }}</p>
                    <p class="time">{{ order.showTimeStr}}</p>
                  </flexbox-item>
                </flexbox>
              </div>
              <ul class="kaidan_buttom click_to_green">
                <li class="right_li" v-for="(checkPo,index1) in order.groupCheckList" :key="index1">
                  <span
                    class="border_radus"
                    :class="[checkPo.scoringType==1 ? 'color_green' : 'color_red']"
                  >{{ checkPo.scoringType==1 ? '+'+checkPo.points : '-' +checkPo.points }}分</span>
                  {{checkPo.checkBigCateName}}-{{checkPo.checkItemName}}
                  <span
                    class="zuoqinag_span"
                  >{{checkPo.appropriateExplain}}</span>
                </li>
              </ul>
            </div>
          </swipeout-item>
        </swipeout>
      </scroller>
    </div>
    <!--end  滚动数据div -->
    <!-- 漂浮物div -->
    <div class="float_buttom_dank">
      <div class="img_list" @click="toEdit('add')">
        <img :src="'./static/img/Btn-AddNew.png'">
      </div>
      <div class="line"></div>
      <div class="img_list" @click="scrollToTop()">
        <img :src="'./static/img/Btn-ToTop.png'">
      </div>
    </div>
    <!--end 漂浮物div -->
    <!-- 右侧菜单 -->
    <div v-transfer-dom> 
      <popup v-model="showRightMenu" position="right">
        <div class="right_menu_div">
          <div class="menu_group_div">
            <h3 class="menu_title">开单状态</h3>
            <checker
              v-model="searchData.selectKdStatus"
              default-item-class="check_mian_item"
              selected-item-class="check_mian_item_selected"
            >
              <checker-item
                v-for="(po , index) in kdStatusData"
                :key="index"
                :value="po.id"
              >{{po.text}}</checker-item>
            </checker>
          </div>
          <div class="line"></div>
          <div class="menu_group_div">
            <h3 class="menu_title">开单时间</h3>
            <checker
              v-model="searchData.selectKdTimeType"
              default-item-class="check_mian_item"
              selected-item-class="check_mian_item_selected"
            >
              <checker-item
                v-for="(po , index) in kdTimeData"
                :key="index"
                :value="po.id"
                @on-item-click="onKdTimeClick"
              >{{po.text}}</checker-item>
            </checker>
          </div>
          <div class="menu_time">
            <group title>
              <datetime
                title="开始时间"
                placeholder="请选择"
                v-model="searchData.startTime"
                format="YYYY-MM-DD"
              ></datetime>
            </group>
            <group title>
              <datetime
                title="结束时间"
                placeholder="请选择"
                v-model="searchData.endTime"
                format="YYYY-MM-DD"
                @on-change="changeEndTime"
              ></datetime>
            </group>
          </div>

          <flexbox class="menu_buttom_group">
            <flexbox-item>
              <x-button type="default" @click.native="doRest" class="dskt_btn">重置</x-button>
            </flexbox-item>
            <flexbox-item>
              <x-button type="primary" @click.native="doOk" class="dskt_btn">确定</x-button>
            </flexbox-item>
          </flexbox>
        </div>
      </popup>
    </div>
    <!--end 菜单 -->
    <selectReason @okEvent="selectReasonOkEvent" :nama="123" ref="selectReason"></selectReason>
  </div>
</template>

<script>
import orderService from "../../shared/service/orderService";
import baseService from "../../shared/service/baseService";
import selectReason from "../../components/selectReason.vue";

import weixinService from "../../shared/service/weixinService";
const wx = require('weixin-js-sdk')

import {
  Swipeout,
  SwipeoutItem,
  SwipeoutButton,
  Popup,
  Checker,
  CheckerItem,
  Datetime,
  dateFormat,
  Group
} from "vux";
export default {
  components: {
    Swipeout,
    SwipeoutItem,
    SwipeoutButton,
    Popup,
    Checker,
    CheckerItem,
    Datetime,
    dateFormat,
    Group,
    selectReason
  },
  data() {
    var data = {
      dataNum: 0,
      showRightMenu: false,

      kdStatusData: [
        { id: "", text: "不限" },
        { id: "1", text: "生效" },
        { id: "0", text: "撤回" }
      ],
      kdTimeData: [
        { id: "", text: "不限" },
        { id: "today", text: "今日" },
        { id: "term", text: "本学期" },
        { id: "year", text: "本学年" }
      ],
      dataList: [],
      yearData: {
        selectYear: null,
        selectTerm: null
      },
      searchData: {
        searchKey: "",
        startTime: "",
        endime: "",
        selectKdStatus: "",
        selectKdTimeType: "term",
      }
    };

    data.showKdTimeText="指定时间";
    data.dataPage = {
      pageNum: 0,
      pages: 0
    };

    return data;
  },
  mounted() {
    //页面滚动给顶部的搜索栏添加一个样式
    $(".view-router").on("scroll", function() {
      if ($(this).scrollTop() >= 100) {
        $(".dskt_nav_bar").addClass("bar_sroll");
      } else {
        $(".dskt_nav_bar").removeClass("bar_sroll");
      }
    });

    this.onKdTimeClick('term');
    weixinService.initWx(wx);
 //   this.doSearchData(1);
  },
  methods: {
    //顶部打开菜单
    onBarRightClick(type) {
      this.showRightMenu = true;
    },
    //搜索事件
    searchEnterEvent(type) {
      this.$refs.inputText.blur();
      this.doSearchData(1);
    },
      //输入框点击事件
    searchInputEvent() {
         this.doSearchData(1);
    },
    selectReasonOkEvent(id, text, type) {
      orderService.doBackState(id, text).then(res => {
        this.$vux.toast.text("已撤回");
        var data = res.data;
        for (let i = 0; i < this.dataList.length; i++) {
          let po = this.dataList[i];
          if (po.id == id) {
            po.showTimeStr = dateFormat(
              this.$commonUtil.getDate(data.stateTime),
              "YYYY-MM-DD HH:mm"
            );
            po.openOrderState = data.openOrderState;
            po.canBack = false;
            break;
          }
        }
      });
    },
    //
    onButtonClick(id) {
      this.$refs.selectReason.showCehui(id);
    },
    //滚动到顶部
    scrollToTop(type) {
      this.$refs.myscroller.scrollTo(0, 0, true);
    },
    //滚动到顶部
    onKdTimeClick(value) {
      if (value == "") {
        this.showKdTimeText="指定时间";
        this.searchData.startTime = "";
        this.searchData.endTime = "";
      } else if (value == "today") {
        this.showKdTimeText="今日";
        var today = dateFormat(new Date(), "YYYY-MM-DD");
        this.searchData.startTime = today;
        this.searchData.endTime = today;
      } else if (value == "year") {
          this.showKdTimeText="本学年";
        if (this.selectYear) {
          this.searchData.startTime = this.selectYear.beginDate.substring(0,10);
          this.searchData.endTime = this.selectYear.endDate.substring(0, 10);
        } else {
          this.getYearList();
        }
      } else if (value == "term") {
         this.showKdTimeText="本学期";
        if (this.selectTerm) {
          this.searchData.startTime = this.selectTerm.beginDate.substring(0,10);
          this.searchData.endTime = this.selectTerm.endDate.substring(0, 10);
        } else {
          this.getTermList();
        }
      }
    },
    getYearList() {
      var nowDateStr = dateFormat(new Date(), "YYYY-MM-DD");
      baseService.getYearList().then(res => {
        var data = res.data;
        for (let i = 0; i < data.length; i++) {
          const po = data[i];
          po.beginDate = dateFormat(this.$commonUtil.getDate(po.beginDate), "YYYY-MM-DD");
          po.endDate = dateFormat(this.$commonUtil.getDate(po.endDate), "YYYY-MM-DD");
          //获取当前学年
          if (
            po.beginDate.substring(0, 10) <= nowDateStr &&
            po.endDate.substring(0, 10) >= nowDateStr
          ) {
            this.selectYear = po;
          }
        }
        if (this.selectYear) {
          this.searchData.startTime = this.selectYear.beginDate.substring(
            0,
            10
          );
          this.searchData.endTime = this.selectYear.endDate.substring(0, 10);
        } else {
          this.$vux.toast.text("当前学年未设置");
        }
      });
    },
    getTermList() {
      var nowDateStr = dateFormat(new Date(), "YYYY-MM-DD");
      baseService.getTermList().then(res => {
        var data = res.data;
        for (let i = 0; i < data.length; i++) {
          const po = data[i];
          po.beginDate = dateFormat(this.$commonUtil.getDate(po.beginDate), "YYYY-MM-DD");
          po.endDate = dateFormat(this.$commonUtil.getDate(po.endDate), "YYYY-MM-DD");
          //获取当前学年
          if (
            po.beginDate.substring(0, 10) <= nowDateStr &&
            po.endDate.substring(0, 10) >= nowDateStr
          ) {
            this.selectTerm = po;
          }
        }
        if (this.selectTerm) {
          this.searchData.startTime = this.selectTerm.beginDate.substring(0,10);
          this.searchData.endTime = this.selectTerm.endDate.substring(0, 10);
        } else {
          this.$vux.toast.text("当前学期未设置");
        }
        this.doSearchData(1);
      });
    },
    //菜单-重置按钮
    doRest(type) {
      this.searchData.selectKdStatus = "";
      this.searchData.selectKdTimeType = "";
      this.searchData.searchKey = "";
      this.searchData.startTime = "";
      this.searchData.endTime = "";
      this.doSearchData(1);
    },
    changeEndTime() {
      if (this.searchData.endTime < this.searchData.startTime) {
        this.$vux.toast.text("结束时间不能早于开始时间！");
      }
    },
    //菜单-确定按钮
    doOk(type) {
      if (this.searchData.endTime && this.searchData.startTime && this.searchData.endTime < this.searchData.startTime) {
        this.$vux.toast.text("结束时间不能早于开始时间！");
        return;
      }
      this.doSearchData(1);
      this.showRightMenu = false;
    },
    //列表-编辑 , 开单按钮
    toEdit(viewType, id,index) {
      this.$dbUtil.setVal(this.$dbUtil.key.REFRUE_ORDER_VIEW, true);
      var recallReason ="";
      var recallStateTime ="";
      if(viewType=='update'){
          recallReason =this.dataList[index].recallReason;
          recallStateTime =this.dataList[index].recallStateTime;
      }else{
        var isWechatOpenOrder = this.$cookie.get(this.$cookie.key.isWechatOpenOrder);
        if(isWechatOpenOrder=='false'){
          this.$vux.toast.text("无开单权限");
          return;
        }
      }
      this.$router.push({
        name: "order_detail",
        query: { viewType: viewType, id: id,
                    recallReason:recallReason,
            recallStateTime:recallStateTime }
      });
    },
    doSearchData(page, fn) {

      var param = {
        isSelectCheckOrder: true,
        searchKey: this.searchData.searchKey,
        stateTime: this.searchData.startTime + " 00:00:00",
        endime: this.searchData.endime + " 23:59:59",
        openOrderState: this.searchData.selectKdStatus,
        operPlatform: 1
      };

      param = this.$cookie.setUserData(param);
      this.$vux.loading.show();
      orderService.getOpenOrderPage(page, param).then(res => {
        var data = res.data;
        this.dataPage.pageNum = page;
        this.dataPage.pages = data.pages;
        this.dataNum = data.total;
        for (let i = 0; i < data.list.length; i++) {
          let po = data.list[i];
          let checkList = po.checkOrderList;
          var names = "、";
          var items = "、";
          var groupCheckList = [];
          for (let ci = 0; ci < checkList.length; ci++) {
            const checkOrder = checkList[ci];
            po.recallReason=checkOrder.recallReason;
            po.recallStateTime=checkOrder.stateTime;
            //不包含加上name
            if (names.indexOf("、" + checkOrder.studentName + "、") < 0) {
              names += checkOrder.studentName + "、";
            }
            if (items.indexOf("、" + checkOrder.checkItemId + "、") < 0) {
              items += checkOrder.checkItemId + "、";
              groupCheckList.push(checkOrder);
            }
          }

          names = names.substring(1, names.length - 1);
          var namesArrLength = names.split("、").length;
          if (namesArrLength > 3) {
            po.names ="共"+namesArrLength+"人: "+names;
          } else {
            po.names = names;
          }
          po.groupCheckList = groupCheckList;

          po.showTimeStr = dateFormat(
            this.$commonUtil.getDate(po.stateTime),
            "YYYY-MM-DD HH:mm"
          );
        }
        if (page == 1) {
          this.dataList = data.list;
        } else {
          this.dataList = this.dataList.concat(data.list);
        }
        if (fn) fn();
        this.$vux.loading.hide();
      });
    },
    //下拉刷新
    refresh(done) {
      this.doSearchData(1, done);
    },
    //下拉刷新
    infinite(done) {
      if (
        this.dataPage.pages > 0 &&
        this.dataPage.pages <= this.dataPage.pageNum
      ) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      if (this.dataPage.pages == 0) {
        this.$refs.myscroller.finishInfinite(true);
        return;
      }
      this.doSearchData(this.dataPage.pageNum + 1, done);
    }
  }
};
</script>
<style scoped>
@import "../../assets/scss/home.scss";
</style>
<style scoped>
.right_li {
  padding-top: 8px;
  font-size: 14px;
}

.user_group_div {
  font-size: 16px;
  color: #111;
  border-right: 1px soild #f4f4f4;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.bar_sroll {
  border-bottom: 1px solid #e3e3e3;
}
.view-router {
  padding-top: 43px;
}
.right_menu_div {
  width: 280px;
  background: white;
  height: 100%;
}
.menu_buttom_group {
  position: absolute;
  bottom: 20px;
  padding: 0 15px;
  box-sizing: border-box;
}
.scrollerWrap {
  position: absolute;
  width: 100%;
  top: 75px;
  bottom: 51px;
}
</style>
